<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4552412_f15f7u01dpi.css"
    />
    <style>
      html {
        height: 1000px;
      }
      body {
        height: 100%;
        background: linear-gradient(#000, #fff);
      }
      .Top {
        height: 100px;
        top: 0;
        background-color: blueviolet;
      }
      .Button {
        position: fixed;
        right: 10px;
        bottom: 10px;
        display: block;
        background-color: #000;
        color: #fff;
      }
      .wrap {
        width: 100px;
        height: 100px;
        margin: 100px auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      main {
        width: 200px;
        height: 200px;
        margin: 0 auto;
      }
      footer {
        width: 400px;
        height: 100px;
        margin: 0 auto;
        background-color: aqua;
        position: relative;
      }
      footer > ul {
        padding-inline-start: 0;
        list-style: none;
        width: 100%;
        height: 100%;
        display: flex;
      }
      footer > ul > li {
        list-style: none;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        border: 1px solid #ccc;
      }
      footer div {
        width: 400px;
        height: 200px;
        background-color: aquamarine;
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 116px;
        left: 0;
        display: none;
      }
      .show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="Top"></div>
    <button class="Button">回到顶部</button>
    <div class="wrap">
      <input type="password" id="Password" />
      <button id="btn">
        <span class="iconfont icon-yanjing_xianshi"></span>
      </button>
    </div>
    <main>
      <div><span>全选</span><input type="checkbox" id="All" /></div>
      <div><span>男</span><input type="checkbox" class="one" /></div>
      <div><span>女</span><input type="checkbox" class="one" /></div>
      <div><span>？</span><input type="checkbox" class="one" /></div>
      <div><span>！</span><input type="checkbox" class="one" /></div>
    </main>
    <footer>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </footer>
  </body>
  <script>
    // 1.顶部悬浮
    let Top = document.querySelector(".Top");
    let btn = document.querySelector(".Button");
    Top.style.top = 0 + "px";
    window.onscroll = function () {
      window.scrollY > 0
        ? (Top.style.position = "sticky")
        : (Top.style.position = "static");
      Top.style.top = 8 + "px";
      if (window.scrollY < 10) {
        btn.style.display = "none";
      } else {
        btn.style.display = "block";
      }
    };
    // 2.回到顶部
    btn.onclick = function () {
      document.documentElement.scrollTop = 0;
    };
    // 3.密码可视化
    let oBtn = document.querySelector(".wrap #btn");
    let oInput = document.querySelector("#Password");
    let Eyes = document.querySelector(".wrap span");
    let flag = false;
    console.log(Eyes);
    oBtn.onclick = function () {
      flag = !flag;
      if (flag) {
        oInput.type = "text";
        Eyes.classList.remove("icon-yanjing_xianshi");
        Eyes.classList.add("icon-biyanjing");
      } else {
        oInput.type = "password";
        Eyes.classList.remove("icon-biyanjing");
        Eyes.classList.add("icon-yanjing_xianshi");
      }
    };
    // 4.全选
    let oAll = document.querySelector("main #All");
    let aInput = document.querySelectorAll("main .one");
    let count = true;
    oAll.onclick = function () {
      aInput.forEach(function (item) {
        item.checked = oAll.checked;
      });
    };
    aInput.forEach(function (item) {
      item.onclick = function () {
        aInput.forEach(function (i) {
          if (!i.checked) {
            count = false;
          } else {
            count = true;
          }
        });
        oAll.checked = count;
      };
    });
    // 5.选项卡
    let aDiv = document.querySelectorAll("footer div");
    let aLi = document.querySelectorAll("footer li");
    aLi.forEach(function (li, index) {
      li.onclick = function () {
        aDiv.forEach(function (item) {
          item.style.zIndex = 0;
        });
        aDiv[index].classList.add("show");
        aDiv[index].style.zIndex++;
      };
    });
  </script>
</html>
